<template>
	<Nav class="f">
		<view class="title p-l-32 nav">首页</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="s" :style="{ top: navHeiht + 'px' }">
			<Search @search="(searchKey) => $goUrl(`/subPackage/index/searchPage?key=${searchKey}`)" />
		</view>
		<view class="box" :style="{ paddingTop: sHeight + 'px' }">
			<view class="swiper-box">
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item v-for="item in 10" :key="item" class="">
						<view class="dispaly-align-center">
							<image
								src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww"
								mode="aspectFill"
							></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" type="primary " :list="list"></u-notice-bar>
				</view>
			</view>
			<view class="home-content">
				<homeTabbar :homeTabbarData="homeTabbarData" />
				<homeCustomMade :modaData="modaData" />
				<homeArticle :articleData="articleData" />
				<view class="wall">
					<Waterfall />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import homeTabbar from '@/compoment/home-tabbar.vue';
import homeCustomMade from '@/compoment/home-custom-made.vue';
import homeArticle from '@/compoment/home-article.vue';
import Waterfall from '@/compoment/waterfall/waterfall.vue';
import Search from '@/compoment/search/search.vue';
import { getElementHeight } from '@/utils/util';

// 获取元素高度
const navHeiht = ref(0);
const sHeight = ref(0);
onMounted(async () => {
	const res = await getElementHeight('.f');
	navHeiht.value = res;
	const sRes = await getElementHeight('.s');
	sHeight.value = sRes;
});

const list = ref(['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶']);

const homeTabbarData = ref([
	{
		image: 'https://plus.unsplash.com/premium_photo-1671826911768-d31a6c47d886?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fGFwcGFyZWx8ZW58MHx8MHx8fDA%3D',
		text: '休闲'
	},
	{
		image: 'https://images.unsplash.com/photo-1551084804-4b60b3c10f9e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fGFwcGFyZWx8ZW58MHx8MHx8fDA%3D',
		text: '礼服'
	},
	{
		image: 'https://images.unsplash.com/photo-1495121605193-b116b5b9c5fe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzd8fGFwcGFyZWx8ZW58MHx8MHx8fDA%3D',
		text: '定制'
	},
	{
		image: 'https://images.unsplash.com/photo-1499971856191-1a420a42b498?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTJ8fGFwcGFyZWx8ZW58MHx8MHx8fDA%3D',
		text: '毛衣'
	},
	{
		image: 'https://images.unsplash.com/photo-1416339698674-4f118dd3388b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTEyfHxhcHBhcmVsfGVufDB8fDB8fHww',
		text: '更多类型'
	}
]);
const modaData = ref({
	title: '匠心制造 量身定制',
	text: '上万师傅在线接单，专业定制',
	buttontext: '去定制',
	image: 'https://plus.unsplash.com/premium_photo-1666299746871-46c49692381d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y3VzdG9tJTIwbWFkZSUyMGFwcGFyZWx8ZW58MHx8MHx8fDA%3D'
});
const articleData = ref([
	{
		image: 'https://images.unsplash.com/photo-1633655442136-bbc120229009?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y3VzdG9tJTIwbWFkZSUyMGFwcGFyZWx8ZW58MHx8MHx8fDA%3D',
		title: '堪比奢侈品的植鞣工艺，把时...',
		text: '堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工...'
	},
	{
		image: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww',
		title: '堪比奢侈品的植鞣工艺，把时...',
		text: '堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工...'
	},
	{
		image: 'https://images.unsplash.com/photo-1571867424485-369464ed33cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzF8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww',
		title: '堪比奢侈品的植鞣工艺，把时...',
		text: '堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工...'
	},
	{
		image: 'https://plus.unsplash.com/premium_photo-1675183690442-b5de4b8a3571?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww',
		title: '堪比奢侈品的植鞣工艺，把时...',
		text: '堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工...'
	}
]);
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}
.s {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	padding-bottom: 5rpx;
	background-color: #fff;
}

.wall {
	margin-top: 40rpx;
}

.swiper-box {
	.swiper {
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		image {
			width: 686rpx;
			height: 360rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
	}
}

.notice {
	padding: 0 32rpx;
	margin-bottom: 32rpx;

	.notice-box {
		height: 72rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}
}
</style>
<style>
page {
	background: #f9f9f9;
}
</style>
